{% extends 'layout/base.html' %}
{% load static %}

{% block breadcrumb %}
 <ol class="breadcrumb float-sm-left">
        <li class="breadcrumb-item"><a href="{% url 'index' %}">项目列表</a></li>
        <li class="breadcrumb-item active">图表统计</li>
    </ol>

{% endblock %}


{% block content %}
    <div class="card card-primary">
        <div class="card-header">
            <h3 class="card-title">最近一年用例情况</h3>
            <div class="card-tools">
            </div>
        </div>
        <div class="card-body">
            <div class="chart">
                <div id="LineSimpe"
                     style="min-height: 250px; height: 400px; max-height: 450px; max-width: 100%;"></div>
            </div>
        </div>
        <!-- /.card-body -->
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">用例执行情况统计</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <div id="ExecuteChart"
                             style="min-height: 250px; height: 400px; max-height: 450px; max-width: 100%;"></div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
        <div class="col-md-6">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">用例通过情况统计</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <div id="passChart"
                             style="min-height: 250px; height: 400px; max-height: 450px; max-width: 100%;"></div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
    </div>
    {% csrf_token %}
{% endblock %}

{% block js %}
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script>
        // 用例通过/未通过的饼图
        function PassPie(title, data) {
            //1、实例化echarts对象
            PieObj = echarts.init(document.getElementById("passChart"));
            //2、配置参数
            PieObjoption = {
                title: {
                    {#text: '接口用例通过',#}
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: title
                },
                series: [
                    {
                        name: '用例',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            //3. setoption
            PieObj.setOption(PieObjoption)
        }

        // 用例执行/未执行的饼图
        function ExecutePie(title, data) {
            //1、实例化echarts对象
            PieObj = echarts.init(document.getElementById("ExecuteChart"));
            //2、配置参数
            PieObjoption = {
                title: {
                    {#text: '接口用例通过',#}
                    subtext: '',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: title
                },
                series: [
                    {
                        name: '用例',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            //3. setoption
            PieObj.setOption(PieObjoption)
        }

        // 近一年来，每月的用例数量走势图，折线图
        function LineSimpe(title, data) {
            // 1.实例化echarts对象
            var lineSimple = echarts.init(document.getElementById("LineSimpe"));
            // 2.第二步 配置数据和参数
            /* 折线图
            lineSimpleOption = {
                xAxis: {
                    type: 'category',
                    data: title,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data,
                    type: 'line'
                }]
            }; */
            lineSimpleOption = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: title,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: data,
                    type: 'line',
                    areaStyle: {}
                }]
            };
            // 3.展示图片吧
            lineSimple.setOption(lineSimpleOption)
        }


        function init() {
            $.ajax({
                "url": "{% url 'show_tab' %}",
                "type": "POST",
                "data": {"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},
                success: function (data) {
                    //用例通过和未通过的饼图
                    PassPie(data['pass_pie']['title'], data['pass_pie']['data']);
                    //用例执行/未执行的饼图
                    ExecutePie(data['execute_pie']['title'], data['execute_pie']['data']);
                    // 折线图
                    LineSimpe(data["line_simple"]["title"], data["line_simple"]["data"]);
                }
            })
        }

        init()
    </script>

{% endblock %}